<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<title>Select 选择器</title>
	<link rel="stylesheet" href="css/doc.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.5/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.5.5/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="js/lay-module/fcSelect/fcSelect.css">
    <style>
.site-title{ margin: 30px 0 20px;}
.site-title fieldset{border: none; padding: 0; border-top: 1px solid #eee;}
.site-title fieldset legend{margin-left: 20px;  padding: 0 10px; font-size: 22px; font-weight: 300;}
	</style>
</head>
<body>
<div class="doc-layout">
	<div class="doc-side">
		<h1>Select</h1>
		<h2>文档目录</h2>
		<ul>
			<li><a href="#use" title="使用方法">使用方法</a></li>
			<li><a href="#demo" title="演示">演示</a></li>
			<li><a href="#param" title="可配置参数">可配置参数</a></li>
			<li><a href="#custom" title="多种用法">多种用法</a></li>
		</ul>
		<h2>AUTHOR</h2>
		<ul>
			<li><a href="" target="_blank">@cm</a></li>
		</ul>
	</div>
	<div class="doc-content" id="doc-content">
		<div class="layui-main">
			<h1 class="doc-h1">Select 选择器</h1>
			<div class="site-title">
			  <fieldset><legend><a name="before">另一版本，普通插件形式调用</a></legend></fieldset>
			</div>
			<div>
				<pre class="layui-code" lay-encode="true">
					不依赖layui，需jquery支持
					<link rel="stylesheet" href="js/lay-module/fcSelect/fcSelect.css">
					<script src="js/lay-module/fcSelect/fc.select.js"></script>
				</pre>
			</div>

			<div class="site-title">
			  <fieldset><legend><a name="before">基础用法</a></legend></fieldset>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<select class="fc-select-demo-1">
						<option value="0" selected="">北京</option>
						<option value="1" selected="">上海</option>
						<option value="2">广州</option>
						<option value="3">深圳</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<select class="fc-select-demo-1">
						<option value="0">拿铁</option>
						<option value="1">摩卡</option>
						<option value="2">卡布基诺</option>
						<option value="3">香草</option>
					</select>
				</div>
			</div>







			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>API</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>参数</td>
						<td>说明</td>
						<td>类型</td>
						<td>默认值</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>elem</td>
						<td>指定元素名称</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>target</td>
						<td>元素在指定的含有滚动条的结构中，页面滚动时候需要，默认body</td>
						<td>string</td>
						<td>body</td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸,large | normal | small</td>
						<td>string</td>
						<td>normal</td>
					</tr>
					<tr>
						<td>data</td>
						<td>select数据，或直接使用option</td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>占位符，也可以直接写在select中</td>
						<td>String</td>
						<td>请选择</td>
					</tr>
					<tr>
						<td>multiple</td>
						<td>多选</td>
						<td>Boolean</td>
						<td>false</td>
					</tr>
					<tr>
						<td>maxTagCount</td>
						<td>多选时用户最多可以选择的项目数</td>
						<td>number</td>
						<td>0</td>
					</tr>
				</tbody>				
			</table>
			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>Select Events</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>事件名称</td>
						<td>说明</td>
						<td>回调参数</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>change</td>
						<td>选中值发生变化时触发，返回elem,value,label,elem是当前select。<Br>多选会在结构中有一个隐藏input，保存已选项</td>
						<td>目前的选中值</td>
					</tr>	
				</tbody>				
			</table>
			<br><br>

			<fieldset class="layui-elem-field layui-field-title" ><legend>Option Attributes</legend></fieldset>
			<table class="layui-table" lay-skin="line">
				<thead>
					<tr>
						<td>参数</td>
						<td>说明</td>
						<td>类型</td>
						<td>默认值</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>clearable</td>
						<td>是否可以清空选项，只在单选时有效</td>
						<td>Boolean</td>
						<td>false</td>
					</tr>	
					<tr>
						<td>select - disabled</td>
						<td>是否禁用整个select</td>
						<td>&lt;select disabled&gt;&lt;/select&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>option - disabled</td>
						<td>是否禁用选项</td>
						<td>&lt;option disabled&gt;&lt;/option&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>selected</td>
						<td>已选项</td>
						<td>&lt;option value="" selected&gt;&lt;/option&gt;</td>
						<td></td>
					</tr>
					<tr>
						<td>size</td>
						<td>输入框尺寸,large | normal | small</td>
						<td>string</td>
						<td>normal</td>
					</tr>
					<tr>
						<td>placeholder</td>
						<td>占位符，也可以直接写在select中</td>
						<td>String</td>
						<td>请选择</td>
					</tr>
				</tbody>				
			</table>








				
		</div>
	</div>
</div>



<script src="js/fcSelect/fc.select.js"></script>
<script>
layui.use(['jquery','layer','code'],function(){
	var $ = layui.$,
		layer = layui.layer;

	layui.code({
		encode: true
		// ,skin: 'notepad'
	});

});


$(function(){
	$('.fc-select-demo-1').fcselect({
		multiple:true,
		change:function(data) {
			console.log(data)
		},
	})
})
</script>

</body>
</html>